<template>
    <div>
        <h1>登录</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">账号</td>
                    <td><input type="text" v-model="info.username"></td>
                </tr>
                <tr>
                    <td align="right">密码</td>
                    <td><input type="password" v-model="info.userpwd"></td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="登录" class="btn btn-success" @click="login"></td>
                </tr>
            </tbody>
        </table>
        {{ info }}
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import axios from 'axios'
//导入路由器对象对象的方法
import { useRouter } from 'vue-router';
//创建一个路由器对象  可以实现页面跳转 push可以实现页面跳转
const router = useRouter();
import { useUserStore } from '@/stores/User'
const abc = useUserStore();
//声明登录的数据
let info = ref({
    username: '',
    userpwd: ''
})
const login = () => {
    //1.判断非空
    if (info.value.username == '') {
        alert("账号不能为空");
        return;
    }
    if (info.value.userpwd == '') {
        alert('密码不能为空')
        return;
    }
    //2.发送网络请求到数据库中验证账号密码是否存在
    axios({
        url: 'https://localhost:7093/api/Admins/Login',//后端请求的地址
        method: 'post',//请求方式
        params: info.value
        // params:{
        //     username:info.value.username,
        //     userpwd:info.value.userpwd,
        // },//params 根据后端情况而定 向后端传递参数
    })
        .then((res) => {
            //then相当于 success  res后端返回成功的结果
            console.log(res);
            if (res.data == -1) {
                alert("账号不存在,请联系管理员");
                return;
            }
            if (res.data == -2) {
                alert("密码错误");
                return;
            }
            // 1.提示登录成功
            alert("登录成功");
            // 2.存储用户信息
            abc.userInfo = res.data
            // 3.跳转到会员增加
            router.push("/index")
        })
        .catch((err) => {
            //catch相当于error catch失败 err后端请求失败的结果
            console.log(err);
        })
};
</script>

<style scoped></style>